<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="css/normalize.css" />
  <link rel="stylesheet" href="css/font/iconfont.css" />
  <link rel="stylesheet" href="css/font1/iconfont.css" />
  <link rel="stylesheet" href="css/common.css" />
  <link rel="stylesheet" href="css/index.css" />
  <link rel="stylesheet" href="./font/login-font/iconfont.css" />
  <link rel="stylesheet" href="./css/login.css" />
  <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.css">  
  <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">    
  <script src="https://unpkg.com/swiper@8/swiper-bundle.js"> </script>  
  <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
  <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js.map"> </script>
  <title>QQ音乐</title>
  <style>
    .swiper {
    width: 100%;
    height: 300px;
    overflow: hidden;
} 
.swiper-slide{
  margin-right: 21px;
  width: calc((100% - 20px * 5) / 5)!important;
}
  </style>
</head>

<body>
  <!-- 头部 -->
  <header class="header w100">
    <div class="header-box w1600">
      <div class="header-nav">
        <div class="logo">
          <a href="" class="logo-a">
            <img src="images/logo.png" alt="" class="logo-pic" />
          </a>
        </div>
        <nav class="mainnav">
          <ul class="mainnav-ul">
            <li class="mainnav-li active">
              <a href="" class="mainnav-a">音乐馆</a>
            </li>
            <li class="mainnav-li">
              <a href="" class="mainnav-a">我的音乐</a>
            </li>
            <li class="mainnav-li mainnav-pop">
              <a href="" class="mainnav-a">客户端
                <img src="images/mark_1.png" alt="" class="mainnav-img" />
              </a>
              <div class="pop-box">
                <div class="pop-up">
                  <ul class="pop-up-list">
                    <li class="pop-up-items">
                      <i class="pop-bg pop-up1"></i>
                      <span class="pop-text">HQ高品质 全员开启</span>
                    </li>
                    <li class="pop-up-items">
                      <i class="pop-bg pop-up2"></i>
                      <span class="pop-text">独家音效 全面升级</span>
                    </li>
                    <li class="pop-up-items">
                      <i class="pop-bg pop-up3"></i>
                      <span class="pop-text">轻盈视觉 动态皮肤</span>
                    </li>
                    <li class="pop-up-items">
                      <a href="" class="pop-update">下载体验</a>
                    </li>
                  </ul>
                </div>
              </div>
            </li>
            <li class="mainnav-li">
              <a href="" class="mainnav-a">开放平台</a>
            </li>
            <li class="mainnav-li">
              <a href="" class="mainnav-a">VIP</a>
            </li>
          </ul>
        </nav>
        <!-- 搜索框 -->
        <div class="search">
          <form action="">
            <button class="btn-search"></button>
            <input type="text" class="inp-search" name="keywords" id="keywords" autocomplete="off"
              placeholder="搜索音乐、MV、歌单、用户" />
            <div class="search-box">
              <div class="search-menu">
                <ul class="search-list">
                  <li class="search-items">
                    <a href="" class="search-links">
                      <span class="num">1</span>
                      <p class="search-info">我们的歌</p>
                      <span class="count">76.5</span>
                    </a>
                  </li>
                  <li class="search-items">
                    <a href="" class="search-links">
                      <span class="num">2</span>
                      <p class="search-info">红尘客栈</p>
                      <span class="count">176.5</span>
                    </a>
                  </li>
                  <li class="search-items">
                    <a href="" class="search-links">
                      <span class="num">3</span>
                      <p class="search-info">水星记</p>
                      <span class="count">100.9</span>
                    </a>
                  </li>
                  <li class="search-items">
                    <a href="" class="search-links">
                      <span class="num">4</span>
                      <p class="search-info">林俊杰</p>
                      <span class="count">44.5</span>
                    </a>
                  </li>
                  <li class="search-items">
                    <a href="" class="search-links">
                      <span class="num">5</span>
                      <p class="search-info">错位时空</p>
                      <span class="count">106.5</span>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </form>
        </div>
        <!-- 用户功能 -->
        <div class="user-functions">
          <a href="javascript:;" class="login">登录</a>
          <div class="user-menu menu-vip menu-list">
            <span class="menu-content">开通VIP</span>
            <div class="drop-menu">
              <a href="" class="drop-menu-links">开通绿钻豪华版</a>
              <a href="" class="drop-menu-links">开通付费包</a>
            </div>
          </div>
          <div class="user-menu menu-money menu-list">
            <span class="menu-content">充值</span>
            <div class="drop-menu">
              <a href="" class="drop-menu-links">购买乐币</a>
              <a href="" class="drop-menu-links">充值饭票</a>
            </div>
          </div>
        </div>
      </div>
      <!-- 子导航 -->
      <div class="subnav">
        <ul class="subnav-list">
          <li class="subnav-items active">
            <a href="index.html" class="subnav-links">首页</a>
          </li>
          <li class="subnav-items">
            <a href="singer.html" class="subnav-links">歌手</a>
          </li>
          <li class="subnav-items">
            <a href="Newdisc.html" class="subnav-links">新碟</a>
          </li>
          <li class="subnav-items">
            <a href="top.html" class="subnav-links">排行榜</a>
          </li>
          <li class="subnav-items">
            <a href="classify.html" class="subnav-links">分类歌单</a>
          </li>
          <li class="subnav-items">
            <a href="MV.html" class="subnav-links">MV</a>
          </li>
          <li class="subnav-items">
            <a href="radio.html" class="subnav-links">电台</a>
          </li>
          <li class="subnav-items">
            <a href="Album.html" class="subnav-links">数字专辑</a>
          </li>
          <li class="subnav-items">
            <a href="ticket.html" class="subnav-links">票务</a>
          </li>
        </ul>
      </div>
    </div>
  </header>
  <!-- 内容模块 -->
  <!-- 歌单推荐 -->
  <section class="section w100">
    <div class="section-box w1600">
      <!-- 模块标题 -->
      <h2 class="section-title">
        <span class="none">歌单推荐</span>
      </h2>
      <!-- 模块导航 -->
      <div class="subnav mb20">
        <ul class="subnav-list">
          <li class="subnav-items active">
            <a href="" class="subnav-links">为你推荐</a>
          </li>
          <li class="subnav-items">
            <a href="" class="subnav-links">经典</a>
          </li>
          <li class="subnav-items">
            <a href="" class="subnav-links">韩语</a>
          </li>
          <li class="subnav-items">
            <a href="" class="subnav-links">说唱</a>
          </li>
          <li class="subnav-items">
            <a href="" class="subnav-links">英语</a>
          </li>
          <li class="subnav-items">
            <a href="" class="subnav-links">伤感</a>
          </li>
        </ul>
      </div>

      <div class="swiper mb40">
        <div class="swiper-wrapper">
          <!-- <div class="swiper-slide">
            <div class="sec-con-box">
              <a href="" class="section-content-links">
                <img src="images/upload/1.jpg" alt="" class="sec-con-pic" />
                <i class="icon-bg"></i>
              </a>
            </div>
            <div class="sec-con-text">
              <h3 class="sec-con-title">
                <a href="#" class="sec-con-title-link" title="【丧系歌单】他总是不懂我的爱">【丧系歌单】他总是不懂我的爱</a>
              </h3>
              <p class="sec-con-desc">
                播放量：<span class="colorlevel3">2188.9</span>万
              </p>
            </div>
          </div>    -->
        </div>
      </div>
      <!-- 分页条 -->
      <div class="swiper-pagination"></div>
    </div>

    <!-- 左右按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </section>
  <!-- 新歌首发模块 -->
  <section class="section w100 section1">
    <div class="section-box w1600 pr">
      <!-- 模块标题 -->
      <h2 class="section-title">
        <span class="none">新歌首发</span>
      </h2>
      <div class="section-btn sec-player-box">
        <a href="" class="section-btn-link">
          <i class="iconfont icon-player-play"></i>
          <span class="section-btn-text">播放全部</span>
        </a>
      </div>
      <!-- 模块导航 -->
      <div class="subnav mb20">
        <ul class="subnav-list">
          <li class="subnav-items active">
            <a href="" class="subnav-links">最新</a>
          </li>
          <li class="subnav-items">
            <a href="" class="subnav-links">内地</a>
          </li>
          <li class="subnav-items">
            <a href="" class="subnav-links">港台</a>
          </li>
          <li class="subnav-items">
            <a href="" class="subnav-links">欧美</a>
          </li>
          <li class="subnav-items">
            <a href="" class="subnav-links">韩国</a>
          </li>
          <li class="subnav-items">
            <a href="" class="subnav-links">日本</a>
          </li>
        </ul>
      </div>
      <!-- 模块内容 -->
      <div class="section-content mb40">
        <ul class="section-content-list">
          <li class="section-content-items">
            <ul class="sec-con-sublist">
              <li class="sec-con-subitems">
                <div class="sec-con-sub-box">
                  <a href="" class="section-content-links">
                    <img src="images/new/1.webp" alt="" class="sec-con-pic" />
                    <i class="icon-bg"></i>
                  </a>
                </div>
                <div class="sec-con-sub-text">
                  <h3 class="sec-con-sub-title">
                    <a href="#" class="sec-con-title-link" title="Numb">Numb</a>
                  </h3>
                  <p class="sec-con-desc">
                    <a href="" class="sec-con-subauthor sec-con-title-link">Marshmello /Khalid</a>
                  </p>
                </div>
                <div class="sec-con-time">02:35</div>
              </li>
              <li class="sec-con-subitems">
                <div class="sec-con-sub-box">
                  <a href="" class="section-content-links">
                    <img src="images/new/2.webp" alt="" class="sec-con-pic" />
                    <i class="icon-bg"></i>
                  </a>
                </div>
                <div class="sec-con-sub-text">
                  <h3 class="sec-con-sub-title">
                    <a href="#" class="sec-con-title-link" title="Numb">The Fall</a>
                  </h3>
                  <p class="sec-con-desc">
                    <a href="" class="sec-con-subauthor sec-con-title-link">The Chainsmokers /Ship Wrek</a>
                  </p>
                </div>
                <div class="sec-con-time">03.16</div>
              </li>
              <li class="sec-con-subitems">
                <div class="sec-con-sub-box">
                  <a href="" class="section-content-links">
                    <img src="images/new/3.webp" alt="" class="sec-con-pic" />
                    <i class="icon-bg"></i>
                  </a>
                </div>
                <div class="sec-con-sub-text">
                  <h3 class="sec-con-sub-title">
                    <a href="#" class="sec-con-title-link" title="二十">二十</a>
                  </h3>
                  <p class="sec-con-desc">
                    <a href="" class="sec-con-subauthor sec-con-title-link">硬糖少女303陈卓璇</a>
                  </p>
                </div>
                <div class="sec-con-time">05:03</div>
              </li>
              <li class="sec-con-subitems">
                <div class="sec-con-sub-box">
                  <a href="" class="section-content-links">
                    <img src="images/new/4.webp" alt="" class="sec-con-pic" />
                    <i class="icon-bg"></i>
                  </a>
                </div>
                <div class="sec-con-sub-text">
                  <h3 class="sec-con-sub-title">
                    <a href="#" class="sec-con-title-link" title="你要快乐">你要快乐</a>
                  </h3>
                  <p class="sec-con-desc">
                    <a href="" class="sec-con-subauthor sec-con-title-link">时代少年团</a>
                  </p>
                </div>
                <div class="sec-con-time">03:50</div>
              </li>
              <li class="sec-con-subitems">
                <div class="sec-con-sub-box">
                  <a href="" class="section-content-links">
                    <img src="images/new/5.webp" alt="" class="sec-con-pic" />
                    <i class="icon-bg"></i>
                  </a>
                </div>
                <div class="sec-con-sub-text">
                  <h3 class="sec-con-sub-title">
                    <a href="#" class="sec-con-title-link" title="一周的朋友《一周的朋友》电影主题曲">一周的朋友《一周的朋友》电影主题曲</a>
                  </h3>
                  <p class="sec-con-desc">
                    <a href="" class="sec-con-subauthor sec-con-title-link">田馥甄</a>
                  </p>
                </div>
                <div class="sec-con-time">04:34</div>
              </li>
              <li class="sec-con-subitems">
                <div class="sec-con-sub-box">
                  <a href="" class="section-content-links">
                    <img src="images/new/6.webp" alt="" class="sec-con-pic" />
                    <i class="icon-bg"></i>
                  </a>
                </div>
                <div class="sec-con-sub-text">
                  <h3 class="sec-con-sub-title">
                    <a href="#" class="sec-con-title-link" title="牵戏">牵戏</a>
                  </h3>
                  <p class="sec-con-desc">
                    <a href="" class="sec-con-subauthor sec-con-title-link">张信哲</a>
                  </p>
                </div>
                <div class="sec-con-time">05.00</div>
              </li>
              <li class="sec-con-subitems">
                <div class="sec-con-sub-box">
                  <a href="" class="section-content-links">
                    <img src="images/new/7.webp" alt="" class="sec-con-pic" />
                    <i class="icon-bg"></i>
                  </a>
                </div>
                <div class="sec-con-sub-text">
                  <h3 class="sec-con-sub-title">
                    <a href="#" class="sec-con-title-link" title="《说英雄谁是英雄》网剧插曲">《说英雄谁是英雄》网剧插曲</a>
                  </h3>
                  <p class="sec-con-desc">
                    <a href="" class="sec-con-subauthor sec-con-title-link">叶里</a>
                  </p>
                </div>
                <div class="sec-con-time">03:35</div>
              </li>
              <li class="sec-con-subitems">
                <div class="sec-con-sub-box">
                  <a href="" class="section-content-links">
                    <img src="images/new/8.webp" alt="" class="sec-con-pic" />
                    <i class="icon-bg"></i>
                  </a>
                </div>
                <div class="sec-con-sub-text">
                  <h3 class="sec-con-sub-title">
                    <a href="#" class="sec-con-title-link" title="反派角色">反派角色</a>
                  </h3>
                  <p class="sec-con-desc">
                    <a href="" class="sec-con-subauthor sec-con-title-link">郭冠廷</a>
                  </p>
                </div>
                <div class="sec-con-time">04:36</div>
              </li>
              <li class="sec-con-subitems">
                <div class="sec-con-sub-box">
                  <a href="" class="section-content-links">
                    <img src="images/new/9.webp" alt="" class="sec-con-pic" />
                    <i class="icon-bg"></i>
                  </a>
                </div>
                <div class="sec-con-sub-text">
                  <h3 class="sec-con-sub-title">
                    <a href="#" class="sec-con-title-link" title="祝你万事如意（So Long）">祝你万事如意（So Long）</a>
                  </h3>
                  <p class="sec-con-desc">
                    <a href="" class="sec-con-subauthor sec-con-title-link">伏仪 /AKIKO桃子</a>
                  </p>
                </div>
                <div class="sec-con-time">04.43</div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- 分页条 -->
      <div class="section-pagebar">
        <ul class="pagebar-ul">
          <a href="" class="pagebar-links">
            <li class="pagebar-li active"></li>
          </a>
          <a href="" class="pagebar-links">
            <li class="pagebar-li"></li>
          </a>
          <a href="" class="pagebar-links">
            <li class="pagebar-li"></li>
          </a>
          <a href="" class="pagebar-links">
            <li class="pagebar-li"></li>
          </a>
          <a href="" class="pagebar-links">
            <li class="pagebar-li"></li>
          </a>
          <a href="" class="pagebar-links">
            <li class="pagebar-li"></li>
          </a>
          <a href="" class="pagebar-links">
            <li class="pagebar-li"></li>
          </a>
        </ul>
      </div>
    </div>

    <!-- 左右按钮 -->
    <div class="btn-page btn-prev">
      <a href="" class="btn-page-link">
        <i class="btn-iconfont iconfont-prev"></i>
      </a>
    </div>
    <div class="btn-page btn-next">
      <a href="" class="btn-page-link">
        <i class="btn-iconfont iconfont-next"></i>
      </a>
    </div>
  </section>
  <!-- 精彩推荐 -->
  <section class="section w100 section2">
    <div class="section-box w1600">
      <!-- 模块标题 -->
      <h2 class="section-title mb20">
        <span class="none">精彩推荐</span>
      </h2>
      <!-- 模块内容 -->
      <div class="section-content mb40">
        <ul class="section-content-list">
          <li class="section-items">
            <div class="sec-con-box">
              <a href="" class="section-content-links">
                <img src="images/new/g1.webp" alt="" class="sec-con-pic" />
              </a>
            </div>
          </li>
          <li class="section-items">
            <div class="sec-con-box">
              <a href="" class="section-content-links">
                <img src="images/new/g2.webp" alt="" class="sec-con-pic" />
              </a>
            </div>
          </li>
        </ul>
      </div>
      <!-- 分页条 -->
      <div class="section-pagebar">
        <ul class="pagebar-ul">
          <a href="" class="pagebar-links">
            <li class="pagebar-li active"></li>
          </a>
          <a href="" class="pagebar-links">
            <li class="pagebar-li"></li>
          </a>
          <a href="" class="pagebar-links">
            <li class="pagebar-li"></li>
          </a>
          <a href="" class="pagebar-links">
            <li class="pagebar-li"></li>
          </a>
          <a href="" class="pagebar-links">
            <li class="pagebar-li"></li>
          </a>
          <a href="" class="pagebar-links">
            <li class="pagebar-li"></li>
          </a>
          <a href="" class="pagebar-links">
            <li class="pagebar-li"></li>
          </a>
        </ul>
      </div>
    </div>

    <!-- 左右按钮 -->
    <div class="btn-page btn-prev">
      <a href="" class="btn-page-link">
        <i class="btn-iconfont iconfont-prev"></i>
      </a>
    </div>
    <div class="btn-page btn-next">
      <a href="" class="btn-page-link">
        <i class="btn-iconfont iconfont-next"></i>
      </a>
    </div>
  </section>
  <!-- 新碟首发 -->
  <section class="section w100 section3">
    <div class="section-box w1600 pr">
      <!-- 模块标题 -->
      <h2 class="section-title">
        <span class="none">新碟首发</span>
      </h2>
      <div class="section-more">
        <a href="" class="section-more-link">
          <span class="section-more-text">更多</span>
          <i class="iconfont icon-gengduo"></i>
        </a>
      </div>
      <!-- 模块导航 -->
      <div class="subnav mb20">
        <ul class="subnav-list">
          <li class="subnav-items active">
            <a href="" class="subnav-links">内地</a>
          </li>
          <li class="subnav-items">
            <a href="" class="subnav-links">港台</a>
          </li>
          <li class="subnav-items">
            <a href="" class="subnav-links">欧美</a>
          </li>
          <li class="subnav-items">
            <a href="" class="subnav-links">韩国</a>
          </li>
          <li class="subnav-items">
            <a href="" class="subnav-links">日本</a>
          </li>
          <li class="subnav-items">
            <a href="" class="subnav-links">其他</a>
          </li>
        </ul>
      </div>
      <!-- 模块内容 -->
      <div class="start-wrapper mb40">
        <ul class="start-ul">
          <li class="start-li">
            <ul class="start-sublist">
              <li class="start-sublist-items">
                <div class="start-pic">
                  <a href="" class="start-link">
                    <img src="images/new/m1.webp" alt="" class="start-link-img" />
                    <i class="icon-bg"></i>
                  </a>
                </div>
                <div class="start-content">
                  <h3 class="start-con-title">
                    <a href="" class="start-con-link">王者荣耀 游戏原声 宫本武藏 《无双》影片原声带</a>
                  </h3>
                  <p class="start-con-info">
                    <a href="" class="start-con-author">王者荣耀</a>
                  </p>
                </div>
              </li>
              <li class="start-sublist-items">
                <div class="start-pic">
                  <a href="" class="start-link">
                    <img src="images/new/m2.webp" alt="" class="start-link-img" />
                    <i class="icon-bg"></i>
                  </a>
                </div>
                <div class="start-content">
                  <h3 class="start-con-title">
                    <a href="" class="start-con-link">爱你的特别感觉 (feat. Doggie)</a>
                  </h3>
                  <p class="start-con-info">
                    <a href="" class="start-con-author">W8VES /陈近南 /Doggie</a>
                  </p>
                </div>
              </li>
              <li class="start-sublist-items">
                <div class="start-pic">
                  <a href="" class="start-link">
                    <img src="images/new/m3.webp" alt="" class="start-link-img" />
                    <i class="icon-bg"></i>
                  </a>
                </div>
                <div class="start-content">
                  <h3 class="start-con-title">
                    <a href="" class="start-con-link">懒</a>
                  </h3>
                  <p class="start-con-info">
                    <a href="" class="start-con-author">花粥</a>
                  </p>
                </div>
              </li>
              <li class="start-sublist-items">
                <div class="start-pic">
                  <a href="" class="start-link">
                    <img src="images/new/m4.webp" alt="" class="start-link-img" />
                    <i class="icon-bg"></i>
                  </a>
                </div>
                <div class="start-content">
                  <h3 class="start-con-title">
                    <a href="" class="start-con-link">爱粤之城</a>
                  </h3>
                  <p class="start-con-info">
                    <a href="" class="start-con-author">赖伟锋</a>
                  </p>
                </div>
              </li>
              <li class="start-sublist-items">
                <div class="start-pic">
                  <a href="" class="start-link">
                    <img src="images/new/m5.webp" alt="" class="start-link-img" />
                    <i class="icon-bg"></i>
                  </a>
                </div>
                <div class="start-content">
                  <h3 class="start-con-title">
                    <a href="" class="start-con-link">梦 (Flying my dream)</a>
                  </h3>
                  <p class="start-con-info">
                    <a href="" class="start-con-author">TF家族 /TF家族-朱志鑫</a>
                  </p>
                </div>
              </li>
              <li class="start-sublist-items">
                <div class="start-pic">
                  <a href="" class="start-link">
                    <img src="images/new/m6.webp" alt="" class="start-link-img" />
                    <i class="icon-bg"></i>
                  </a>
                </div>
                <div class="start-content">
                  <h3 class="start-con-title">
                    <a href="" class="start-con-link">童谣</a>
                  </h3>
                  <p class="start-con-info">
                    <a href="" class="start-con-author">疯医乐队</a>
                  </p>
                </div>
              </li>
              <li class="start-sublist-items">
                <div class="start-pic">
                  <a href="" class="start-link">
                    <img src="images/new/m7.webp" alt="" class="start-link-img" />
                    <i class="icon-bg"></i>
                  </a>
                </div>
                <div class="start-content">
                  <h3 class="start-con-title">
                    <a href="" class="start-con-link">一半</a>
                  </h3>
                  <p class="start-con-info">
                    <a href="" class="start-con-author">傅欣瑶</a>
                  </p>
                </div>
              </li>
              <li class="start-sublist-items">
                <div class="start-pic">
                  <a href="" class="start-link">
                    <img src="images/new/m8.webp" alt="" class="start-link-img" />
                    <i class="icon-bg"></i>
                  </a>
                </div>
                <div class="start-content">
                  <h3 class="start-con-title">
                    <a href="" class="start-con-link">甜狗（Prod.IOF）</a>
                  </h3>
                  <p class="start-con-info">
                    <a href="" class="start-con-author">drcchen&陈俊豪</a>
                  </p>
                </div>
              </li>
              <li class="start-sublist-items">
                <div class="start-pic">
                  <a href="" class="start-link">
                    <img src="images/new/m9.webp" alt="" class="start-link-img" />
                    <i class="icon-bg"></i>
                  </a>
                </div>
                <div class="start-content">
                  <h3 class="start-con-title">
                    <a href="" class="start-con-link">Darling</a>
                  </h3>
                  <p class="start-con-info">
                    <a href="" class="start-con-author">樊琦</a>
                  </p>
                </div>
              </li>
              <li class="start-sublist-items">
                <div class="start-pic">
                  <a href="" class="start-link">
                    <img src="images/new/m10.webp" alt="" class="start-link-img" />
                    <i class="icon-bg"></i>
                  </a>
                </div>
                <div class="start-content">
                  <h3 class="start-con-title">
                    <a href="" class="start-con-link">小世界</a>
                  </h3>
                  <p class="start-con-info">
                    <a href="" class="start-con-author">毛不易 /杨格</a>
                  </p>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- 分页条 -->
      <div class="section-pagebar">
        <ul class="pagebar-ul">
          <a href="" class="pagebar-links">
            <li class="pagebar-li active"></li>
          </a>
          <a href="" class="pagebar-links">
            <li class="pagebar-li"></li>
          </a>
        </ul>
      </div>
    </div>

    <!-- 左右按钮 -->
    <div class="btn-page btn-prev">
      <a href="" class="btn-page-link">
        <i class="btn-iconfont iconfont-prev"></i>
      </a>
    </div>
    <div class="btn-page btn-next">
      <a href="" class="btn-page-link">
        <i class="btn-iconfont iconfont-next"></i>
      </a>
    </div>
  </section>
  <!-- 排行榜 -->
  <section class="section w100 section4">
    <div class="section-box w1600 pr">
      <h2 class="section-title"><span class="none">排行榜</span></h2>
      <div class="section-more">
        <a class=".section-more-link" href="#"><span>更多</span><i class="iconfont icon-gengduo"></i></a>
      </div>
      <div class="section-content mb50">
        <ul class="section-top">
          <li class="section-top-li top-bg1">
            <h3 class="section-top-h3">
              <a href="#" class="section-top-a">热歌</a>
            </h3>
            <div class="line"></div>
            <i class="icon-bg"></i>
            <ul class="section-top-list">
              <li class="section-top-item">
                <div class="section-top-num">1</div>
                <div class="section-top-content">
                  <h4><a href="#" class="section-top-title">妈妈的话</a></h4>
                  <p><a href="#" class="section-top-author">Zyboy忠宇</a></p>
                </div>
              </li>
              <li class="section-top-item">
                <div class="section-top-num">2</div>
                <div class="section-top-content">
                  <h4>
                    <a href="#" class="section-top-title">Letting Go</a>
                  </h4>
                  <p><a href="#" class="section-top-author">蔡健雅</a></p>
                </div>
              </li>
              <li class="section-top-item">
                <div class="section-top-num">3</div>
                <div class="section-top-content">
                  <h4><a href="#" class="section-top-title">孤勇者</a></h4>
                  <p><a href="#" class="section-top-author">陈奕迅</a></p>
                </div>
              </li>
            </ul>
          </li>
          <li class="section-top-li top-bg2">
            <h3 class="section-top-h3">
              <a href="#" class="section-top-a">新歌</a>
            </h3>
            <div class="line"></div>
            <i class="icon-bg"></i>
            <ul class="section-top-list">
              <li class="section-top-item">
                <div class="section-top-num">1</div>
                <div class="section-top-content">
                  <h4><a href="#" class="section-top-title">可</a></h4>
                  <p>
                    <a href="#" class="section-top-author">薛之谦/张靓颖</a>
                  </p>
                </div>
              </li>
              <li class="section-top-item">
                <div class="section-top-num">2</div>
                <div class="section-top-content">
                  <h4><a href="#" class="section-top-title">堕</a></h4>
                  <p><a href="#" class="section-top-author">Zyboy忠宇</a></p>
                </div>
              </li>
              <li class="section-top-item">
                <div class="section-top-num">3</div>
                <div class="section-top-content">
                  <h4><a href="#" class="section-top-title">你要快乐</a></h4>
                  <p><a href="#" class="section-top-author">时代少年团</a></p>
                </div>
              </li>
            </ul>
          </li>
          <li class="section-top-li top-bg3">
            <h3 class="section-top-h3">
              <a href="#" class="section-top-a">流行指数</a>
            </h3>
            <div class="line"></div>
            <i class="icon-bg"></i>
            <ul class="section-top-list">
              <li class="section-top-item">
                <div class="section-top-num">1</div>
                <div class="section-top-content">
                  <h4><a href="#" class="section-top-title">可</a></h4>
                  <p>
                    <a href="#" class="section-top-author">薛之谦/张靓颖</a>
                  </p>
                </div>
              </li>
              <li class="section-top-item">
                <div class="section-top-num">2</div>
                <div class="section-top-content">
                  <h4><a href="#" class="section-top-title">你要快乐</a></h4>
                  <p><a href="#" class="section-top-author">时代少年团</a></p>
                </div>
              </li>
              <li class="section-top-item">
                <div class="section-top-num">3</div>
                <div class="section-top-content">
                  <h4>
                    <a href="#" class="section-top-title">我们都是这样长大的 (Live)</a>
                  </h4>
                  <p>
                    <a href="#" class="section-top-author">林晓峰/周柏豪</a>
                  </p>
                </div>
              </li>
            </ul>
          </li>
          <li class="section-top-li top-bg4">
            <h3 class="section-top-h3">
              <a href="#" class="section-top-a">欧美</a>
            </h3>
            <div class="line"></div>
            <i class="icon-bg"></i>
            <ul class="section-top-list">
              <li class="section-top-item">
                <div class="section-top-num">1</div>
                <div class="section-top-content">
                  <h4>
                    <a href="#" class="section-top-title">Keep On Dancing</a>
                  </h4>
                  <p>
                    <a href="#" class="section-top-author">Heleen/BEAUZ</a>
                  </p>
                </div>
              </li>
              <li class="section-top-item">
                <div class="section-top-num">2</div>
                <div class="section-top-content">
                  <h4>
                    <a href="#" class="section-top-title">I Like You (A Happier Song) (Explicit)</a>
                  </h4>
                  <p>
                    <a href="#" class="section-top-author">Post Malone /Doja Cat</a>
                  </p>
                </div>
              </li>
              <li class="section-top-item">
                <div class="section-top-num">3</div>
                <div class="section-top-content">
                  <h4>
                    <a href="#" class="section-top-title">Jiggle Jiggle</a>
                  </h4>
                  <p>
                    <a href="#" class="section-top-author">Duke & Jones /Louis Theroux</a>
                  </p>
                </div>
              </li>
            </ul>
          </li>
          <li class="section-top-li top-bg5">
            <h3 class="section-top-h3">
              <a href="#" class="section-top-a">韩国</a>
            </h3>
            <div class="line"></div>
            <i class="icon-bg"></i>
            <ul class="section-top-list">
              <li class="section-top-item">
                <div class="section-top-num">1</div>
                <div class="section-top-content">
                  <h4>
                    <a href="#" class="section-top-title">怪火 (Illusion)</a>
                  </h4>
                  <p>
                    <a href="#" class="section-top-author">aespa (에스파)</a>
                  </p>
                </div>
              </li>
              <li class="section-top-item">
                <div class="section-top-num">2</div>
                <div class="section-top-content">
                  <h4>
                    <a href="#" class="section-top-title">TOMBOY (R3hab Remix)</a>
                  </h4>
                  <p>
                    <a href="#" class="section-top-author">(G)I-DLE ((여자)아이들) /R3HAB</a>
                  </p>
                </div>
              </li>
              <li class="section-top-item">
                <div class="section-top-num">3</div>
                <div class="section-top-content">
                  <h4><a href="#" class="section-top-title">ZOOM</a></h4>
                  <p>
                    <a href="#" class="section-top-author">Jessi (제시)</a>
                  </p>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </section>
  <!-- MV -->
  <section class="section w100 section5">
    <div class="section-box w1600 pr">
      <!-- 模块标题 -->
      <h2 class="section-title">
        <span class="none">MV</span>
      </h2>
      <div class="section-more">
        <a href="" class="section-more-link">
          <span class="section-more-text">更多</span>
          <i class="iconfont icon-gengduo"></i>
        </a>
      </div>
      <!-- 模块导航 -->
      <div class="subnav mb20">
        <ul class="subnav-list">
          <li class="subnav-items active">
            <a href="" class="subnav-links">精选</a>
          </li>
          <li class="subnav-items">
            <a href="" class="subnav-links">内地</a>
          </li>
          <li class="subnav-items">
            <a href="" class="subnav-links">港台</a>
          </li>
          <li class="subnav-items">
            <a href="" class="subnav-links">欧美</a>
          </li>
          <li class="subnav-items">
            <a href="" class="subnav-links">韩国</a>
          </li>
          <li class="subnav-items">
            <a href="" class="subnav-links">日本</a>
          </li>
        </ul>
      </div>
      <!-- 模块内容 -->
      <div class="start-wrapper mb40">
        <ul class="start-ul">
          <li class="start-li">
            <ul class="start-sublist">
              <li class="start-sublist-items">
                <div class="start-pic">
                  <a href="" class="start-link">
                    <img src="images/new/v1.webp" alt="" class="start-link-img" />
                    <i class="icon-bg"></i>
                  </a>
                </div>
                <div class="start-content">
                  <h3 class="start-con-title">
                    <a href="" class="start-con-link">《MY LOVE (feat. RAVI)》</a>
                  </h3>
                  <p class="start-con-info">
                    <a href="" class="start-con-author">徐仁国 /Ravi</a>
                  </p>
                  <div class="start-con-foot">
                    <span class="start-con-text">
                      <i class="iconfont icon-zhibofuwu"></i>1552
                    </span>
                  </div>
                </div>
              </li>
              <li class="start-sublist-items">
                <div class="start-pic">
                  <a href="" class="start-link">
                    <img src="images/new/v2.webp" alt="" class="start-link-img" />
                    <i class="icon-bg"></i>
                  </a>
                </div>
                <div class="start-content">
                  <h3 class="start-con-title">
                    <a href="" class="start-con-link">《斯德哥尔摩》</a>
                  </h3>
                  <p class="start-con-info">
                    <a href="" class="start-con-author">吴克群</a>
                  </p>
                  <div class="start-con-foot">
                    <span class="start-con-text">
                      <i class="iconfont icon-zhibofuwu"></i>3507
                    </span>
                  </div>
                </div>
              </li>
              <li class="start-sublist-items">
                <div class="start-pic">
                  <a href="" class="start-link">
                    <img src="images/new/v3.webp" alt="" class="start-link-img" />
                    <i class="icon-bg"></i>
                  </a>
                </div>
                <div class="start-content">
                  <h3 class="start-con-title">
                    <a href="" class="start-con-link">《Never Stop Me (天赋觉醒)</a>
                  </h3>
                  <p class="start-con-info">
                    <a href="" class="start-con-author">英雄联盟手游</a>
                  </p>
                  <div class="start-con-foot">
                    <span class="start-con-text">
                      <i class="iconfont icon-zhibofuwu"></i>9499
                    </span>
                  </div>
                </div>
              </li>
              <li class="start-sublist-items">
                <div class="start-pic">
                  <a href="" class="start-link">
                    <img src="images/new/v4.webp" alt="" class="start-link-img" />
                    <i class="icon-bg"></i>
                  </a>
                </div>
                <div class="start-content">
                  <h3 class="start-con-title">
                    <a href="" class="start-con-link">《你要快乐》</a>
                  </h3>
                  <p class="start-con-info">
                    <a href="" class="start-con-author">时代少年团</a>
                  </p>
                  <div class="start-con-foot">
                    <span class="start-con-text">
                      <i class="iconfont icon-zhibofuwu"></i>25.3万
                    </span>
                  </div>
                </div>
              </li>
              <li class="start-sublist-items">
                <div class="start-pic">
                  <a href="" class="start-link">
                    <img src="images/new/v5.webp" alt="" class="start-link-img" />
                    <i class="icon-bg"></i>
                  </a>
                </div>
                <div class="start-content">
                  <h3 class="start-con-title">
                    <a href="" class="start-con-link">《江南家书》</a>
                  </h3>
                  <p class="start-con-info">
                    <a href="" class="start-con-author">蒋雪儿</a>
                  </p>
                  <div class="start-con-foot">
                    <span class="start-con-text">
                      <i class="iconfont icon-zhibofuwu"></i>1.7万
                    </span>
                  </div>
                </div>
              </li>
              <li class="start-sublist-items">
                <div class="start-pic">
                  <a href="" class="start-link">
                    <img src="images/new/v6.webp" alt="" class="start-link-img" />
                    <i class="icon-bg"></i>
                  </a>
                </div>
                <div class="start-content">
                  <h3 class="start-con-title">
                    <a href="" class="start-con-link">《一周的朋友》</a>
                  </h3>
                  <p class="start-con-info">
                    <a href="" class="start-con-author">田馥甄</a>
                  </p>
                  <div class="start-con-foot">
                    <span class="start-con-text">
                      <i class="iconfont icon-zhibofuwu"></i>9.1万
                    </span>
                  </div>
                </div>
              </li>
              <li class="start-sublist-items">
                <div class="start-pic">
                  <a href="" class="start-link">
                    <img src="images/new/v7.webp" alt="" class="start-link-img" />
                    <i class="icon-bg"></i>
                  </a>
                </div>
                <div class="start-content">
                  <h3 class="start-con-title">
                    <a href="" class="start-con-link">《答案 (QQ音乐×NBA75周年官方纪念曲)》</a>
                  </h3>
                  <p class="start-con-info">
                    <a href="" class="start-con-author">满舒克 /梁铭琛 /说唱者联盟</a>
                  </p>
                  <div class="start-con-foot">
                    <span class="start-con-text">
                      <i class="iconfont icon-zhibofuwu"></i>14.3万
                    </span>
                  </div>
                </div>
              </li>
              <li class="start-sublist-items">
                <div class="start-pic">
                  <a href="" class="start-link">
                    <img src="images/new/v8.webp" alt="" class="start-link-img" />
                    <i class="icon-bg"></i>
                  </a>
                </div>
                <div class="start-content">
                  <h3 class="start-con-title">
                    <a href="" class="start-con-link">《与我对望的光 (《无双》王者荣耀宫本武藏CG主题曲)》</a>
                  </h3>
                  <p class="start-con-info">
                    <a href="" class="start-con-author">李紫婷 /王者荣耀</a>
                  </p>
                  <div class="start-con-foot">
                    <span class="start-con-text">
                      <i class="iconfont icon-zhibofuwu"></i>5.1万
                    </span>
                  </div>
                </div>
              </li>
              <li class="start-sublist-items">
                <div class="start-pic">
                  <a href="" class="start-link">
                    <img src="images/new/v9.webp" alt="" class="start-link-img" />
                    <i class="icon-bg"></i>
                  </a>
                </div>
                <div class="start-content">
                  <h3 class="start-con-title">
                    <a href="" class="start-con-link">《This Is A Song For Miss Hedy Lamarr》-Jeff Beck
                      /Johnny Depp</a>
                  </h3>
                  <p class="start-con-info">
                    <a href="" class="start-con-author">Jeff Beck /Johnny Depp</a>
                  </p>
                  <div class="start-con-foot">
                    <span class="start-con-text">
                      <i class="iconfont icon-zhibofuwu"></i>1.1万
                    </span>
                  </div>
                </div>
              </li>
              <li class="start-sublist-items">
                <div class="start-pic">
                  <a href="" class="start-link">
                    <img src="images/new/v10.webp" alt="" class="start-link-img" />
                    <i class="icon-bg"></i>
                  </a>
                </div>
                <div class="start-content">
                  <h3 class="start-con-title">
                    <a href="" class="start-con-link">《三分信条
                      (QQ音乐“说唱者联盟”致敬NBA75周年官方纪念曲)》</a>
                  </h3>
                  <p class="start-con-info">
                    <a href="" class="start-con-author">姚琛 /钱润玉 /说唱者联盟</a>
                  </p>
                  <div class="start-con-foot">
                    <span class="start-con-text">
                      <i class="iconfont icon-zhibofuwu"></i>6.0万
                    </span>
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- 分页条 -->
      <div class="section-pagebar">
        <ul class="pagebar-ul">
          <a href="" class="pagebar-links">
            <li class="pagebar-li active"></li>
          </a>
          <a href="" class="pagebar-links">
            <li class="pagebar-li"></li>
          </a>
          <a href="" class="pagebar-links">
            <li class="pagebar-li"></li>
          </a>
          <a href="" class="pagebar-links">
            <li class="pagebar-li"></li>
          </a>
        </ul>
      </div>
    </div>

    <!-- 左右按钮 -->
    <div class="btn-page btn-prev">
      <a href="" class="btn-page-link">
        <i class="btn-iconfont iconfont-prev"></i>
      </a>
    </div>
    <div class="btn-page btn-next">
      <a href="" class="btn-page-link">
        <i class="btn-iconfont iconfont-next"></i>
      </a>
    </div>
  </section>
  <!-- footer -->
  <footer class="footer w100">
    <div class="footer-wrapper w1600">
      <div class="footer-box">
        <!-- 下载客户端 -->
        <div class="footer-update">
          <h5 class="footer-title">下载QQ音乐客户端</h5>
          <ul class="update-list">
            <li class="update-items">
              <a href="" class="update-links">
                <i class="update-bg bg1"></i>
                PC版
              </a>
            </li>
            <li class="update-items">
              <a href="" class="update-links">
                <i class="update-bg bg2"></i>
                Mac版
              </a>
            </li>
            <li class="update-items">
              <a href="" class="update-links">
                <i class="update-bg bg3"></i>
                Android版
              </a>
            </li>
            <li class="update-items">
              <a href="" class="update-links">
                <i class="update-bg bg4"></i>
                iPhone版
              </a>
            </li>
          </ul>
        </div>
        <!-- 特色产品 -->
        <div class="footer-product">
          <h5 class="footer-title">特色产品</h5>
          <ul class="update-list">
            <li class="update-items">
              <a href="" class="update-links">
                <i class="update-bg bg5"></i>
                全民K歌
              </a>
            </li>
            <li class="update-items">
              <a href="" class="update-links">
                <i class="update-bg bg6"></i>
                银河音效
              </a>
            </li>
            <li class="update-items">
              <a href="" class="update-links">
                <i class="update-bg bg7"></i>
                QPlay
              </a>
            </li>
            <li class="update-items">
              <a href="" class="update-links">
                <i class="update-bg bg8"></i>
                Fan直播伴侣
              </a>
            </li>
            <li class="update-items">
              <a href="" class="update-links"> 车载互联 </a>
            </li>
            <li class="update-items">
              <a href="" class="update-links"> QQ演出 </a>
            </li>
          </ul>
        </div>
        <!-- 合作链接 -->
        <div class="footer-coolink">
          <h5 class="footer-title">合作链接</h5>
          <div class="footer-coolink-box">
            <a href="" class="footer-box-links">CJ ENM</a>
            <a href="" class="footer-box-links">腾讯视频</a>
            <a href="" class="footer-box-links">手机QQ空间</a>
            <a href="" class="footer-box-links">最新版QQ</a>
            <a href="" class="footer-box-links">腾讯社交广告</a>
            <a href="" class="footer-box-links">电脑管家</a>
            <a href="" class="footer-box-links">QQ浏览器</a>
            <a href="" class="footer-box-links">腾讯微云</a>
            <a href="" class="footer-box-links">腾讯云</a>
            <a href="" class="footer-box-links">企鹅FM</a>
            <a href="" class="footer-box-links">智能电视网</a>
            <a href="" class="footer-box-links">当贝市场</a>
            <a href="" class="footer-box-links">酷我音乐</a>
            <a href="" class="footer-box-links">酷狗听书</a>
          </div>
        </div>
        <!-- 开放平台 -->
        <div class="footer-coolink">
          <h5 class="footer-title">开放平台</h5>
          <div class="footer-coolink-box">
            <a href="" class="footer-box-links">QQ音乐开放平台</a>
            <a href="" class="footer-box-links">腾讯音乐人</a>
            <a href="" class="footer-box-links">音乐推</a>
          </div>
        </div>
        <!-- TME集团官网 -->
        <div class="footer-coolink">
          <h5 class="footer-title">TME集团官网</h5>
          <div class="footer-coolink-box">
            <a href="" class="footer-box-links">腾讯音乐</a>
          </div>
        </div>
      </div>
      <div class="footer-coopyright">
        <div class="coopyright-item">
          <a href="" class="footer-box-links">关于腾讯 |</a>
          <a href="" class="footer-box-links">About Tencent |</a>
          <a href="" class="footer-box-links">服务条款 |</a>
          <a href="" class="footer-box-links">用户服务协议 |</a>
          <a href="" class="footer-box-links">隐私政策 |</a>
          <a href="" class="footer-box-links">权利声明 |</a>
          <a href="" class="footer-box-links">广告服务 |</a>
          <a href="" class="footer-box-links">腾讯招聘 |</a>
          <a href="" class="footer-box-links">客服中心 |</a>
          <a href="" class="footer-box-links">网站导航</a>
        </div>
        <div class="coopyright-item">
          Copyright © 1998 - 2022 Tencent.
          <a href="" class="footer-box-links">All Rights Reserved.</a>
        </div>
        <div class="coopyright-item">
          腾讯公司
          <a href="" class="footer-box-links"> 版权所有 |</a>
          <a href="" class="footer-box-links">营业执照 |</a>
          网络文化经营许可证：
          <a href="" class="footer-box-links">粤网文[2020]3396-195号 |</a>
          客服电话:
          <a href="" class="footer-box-links">4006016666</a>
        </div>
      </div>
    </div>
  </footer>
  <!-- 侧边栏 -->
  <aside class="side">
    <a href="" class="side-links">
      <i class="side-bg"></i>
    </a>
    <a href="" class="side-links">反馈</a>
    <a href="" class="side-links">
      <i class="side-bg music"></i>
    </a>
  </aside>
  <!-- 登录蒙层 -->
  <div class="mask none">
    <!-- 扫码登录 -->
    <div class="login1">
      <div class="login1-top">
        <!-- qq登录面板 -->
        <h3 class="login1-qq active">QQ登录</h3>
        <h3 class="login1-wechat">微信登录</h3>
      </div>
      <!-- qq登录面板扫码 -->
      <div class="login1-qq-content">
        <div class="login1-middle">
          <div class="login1-middle-left ">
            <div class="login1-middle-left-fast">
              <h2>快捷登录</h2>
              <p>
                使用<a href="javascriot:;">QQ手机版</a>扫码登录，或点击头像授权登录。
              </p>
            </div>
            <div class="login1-middle-left-qrcode">
              <img src="./images/login/ptqrshow.png" alt="" class="pic">
            </div>
            <div class="login1-middle-left-choices">
              <ul class="login1-middle-left-choices-ul">
                <li class="lmlcu password"><a href="#" class="login-pwd">密码登录</a></li>
                <li class="lmlcu enroll"><a href="javascript:;">注册帐号</a></li>
                <li class="lmlcu opinion"><a href="javascript:;">意见反馈</a></li>
                <li class="lmlcu visitor"><a href="javascript:;">游客登录</a></li>
              </ul>
            </div>
          </div>
        <!-- qq密码登录面板 -->
          <div class="login1-middle-left none">
            <div class="login1-middle-left-fast">
              <h2>密码登录</h2>
              <p>
                推荐使用<a href="#" class="login-pwd">快捷登录</a>，防止盗号。
              </p>
            </div>
            <div class="login1-middle-left-qrcode">
                  <input type="text" name="" id="username" autocomplete="off" placeholder="支持QQ号/手机号/邮箱登录">
                  <input type="password" name="" id="pwd" autocomplete="off" placeholder="请输入密码">
                  <input type="button" value="提交" id="submit">
            </div>
            <div class="login1-middle-left-choices">
              <ul class="login1-middle-left-choices-ul">
                <li class="lmlcu"><a href="#">找回密码 </a></li>
                <li class="lmlcu"><a href="#">注册帐号 </a></li>
                <li class="lmlcu"><a href="#">意见反馈</a></li>
              </ul>
            </div>
          </div>

          <div class="login1-middle-right">
            <ul class="login1-middle-right-ul">
              <li class="lmru"><a href="#">QQ音乐</a>将获取以下权限：</li>
              <li class="lmru">
                <i class="iconfont icon-weixuanzhongyuanquan yuan"></i> 全选
              </li>
              <li class="lmru">
                <i class="iconfont icon-dui"></i>使用你的QQ头像、昵称信息
              </li>
              <li class="lmru">
                <i class="iconfont icon-weixuanzhongyuanquan yuan1"></i>你的QQ好友关系
              </li>
              <li class="lmru">
                授权即同意 <a href="javascript:;"> 服务协议</a>和
                <a href="javascript:;">QQ隐私保护指引</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="login1-bth">
          <a href="#">下载客户端 体验更多内容</a>
        </div>
      </div>

      <!-- 微信登录面板 -->
      <div class="login1-content-wechat none">
        <ul class="login1-content-wechat-ul">
          <li class="lcwu">
            <img src="./images/login/ptqrshow.png" alt="" />
          </li>
          <li class="lcwu">
            <p>使用微信扫一扫登录</p>
          </li>
          <li class="lcwu">
            <span>QQ与微信账号的音乐资产、付费特权不互通</span>
          </li>
          <li class="lcwu"><a href="#">下载客户端 体验更多内容</a></li>
        </ul>
      </div>

      <div class="close">×</div>
    </div>
  </div>

  <script src="./js/api.js"></script>
  <script src="./js/ajax.js"></script>
  <script src="./js/index.js"></script>
  <script src="./js/login.js"></script>
</body>

</html>